<template>
  <view class="points-detail-container">
    <!-- 积分明细标题 -->
    <view class="section-title" style="background: #EEF5FF;">积分明细</view>

    <!-- 积分明细列表 -->
    <view class="points-list">
      <view 
        class="points-item" 
        v-for="(item, index) in pointsItems" 
        :key="index"
      >
        <view class="item-left">
          <text class="item-name">{{ item.name }}</text>
        </view>
        <view class="item-right">
          <text :class="['points-value', item.type === 'add' ? 'plus' : 'minus']">
            {{ item.type === 'add' ? '+' : '-' }} {{ item.value }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 积分明细数据
const pointsItems = ref([
  { name: '线上报修', value: '2000', type: 'add' },
  { name: '工单评价', value: '200', type: 'add' },
  { name: '服务兑换', value: '10000', type: 'minus' },
  { name: '备件兑换', value: '3000', type: 'minus' },
  { name: '连登奖励', value: '600', type: 'add' },
  { name: '每日登录', value: '100', type: 'add' },
  { name: '每日登录', value: '100', type: 'add' },
  { name: '每日登录', value: '100', type: 'add' },
  { name: '每日登录', value: '100', type: 'add' },
  { name: '首次注册', value: '5000', type: 'add' }
])
</script>

<style>
.points-detail-container {
  min-height: 100vh;
  background-color: #F5F5F5;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  padding: 20rpx 30rpx;
}

.points-list {
  background-color: #FFFFFF;
  padding: 0 30rpx;
}

.points-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #EEEEEE;
}

.points-item:last-child {
  border-bottom: none;
}

.item-left {
  flex: 1;
}

.item-name {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}

.item-right {
  display: flex;
  align-items: center;
}

.points-value {
  font-size: 28rpx;
  font-weight: 500;
}

.plus {
  color: #1890FF;
}

.minus {
  color: #FF4D4F;
}
</style> 